<template>
  <div class="overview">
    <main-title title="总体概览"></main-title>
    <div class="container">
      <div class="left">
        <title-main title="总体数量"></title-main>
        <div class="box">
          <div class="boxItem" v-for="(item, index) in dataList" :key="index">
            <div class="value">
              <span class="num">{{ item.value }}</span>
              <span class="unit">{{ index > 1 ? '人' : '个' }}</span>
            </div>
            <div class="label">{{ item.label }}</div>
          </div>
        </div>
      </div>
      <div class="right">
        <title-main title="报到社区分部"></title-main>
        <div class="barEchart" ref="barEchart"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, inject, onMounted } from 'vue'
const echarts = inject('echarts')
let barEchart = ref(null)
let myEchart = null
let data = {
  xdata: ['牌楼', '陆迎', '陆兴', '明日星城', '方斜', '学宫'],
  ydata: [32, 35, 42, 45, 42, 33]
}
let dataList = ref([
  { label: '党组织数量', value: 26 },
  { label: '党组织数量', value: 26 },
  { label: '当月报到党员数', value: 26 },
  { label: '当年报到党员数', value: 26 }
])
onMounted(() => {
  setBarEchart()
})
const setBarEchart = () => {
  if (myEchart != null && myEchart != '' && myEchart != undefined) {
    myEchart.dispose() //销毁
  }
  myEchart = echarts.init(barEchart.value, null, { renderer: 'svg' })
  let option = {
    tooltip: {
      trigger: 'axis',
      textStyle: {
        fontSize: 16 // 字体大小
      },
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      // data: ['销售水量', '主营业务'],
      top: '4%',
      right: '5%',
      textStyle: {
        color: '#ffffff',
        fontSize: 15
      }
    },
    grid: {
      top: '15%',
      left: '5%',
      right: '0%',
      bottom: '5%',
      containLabel: true
    },
    xAxis: {
      data: data.xdata,
      axisLabel: {
        color: '#fff',
        fontSize: 14
        // rotate: 45
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#32AFFF'
        }
      }
    },
    yAxis: {
      name: '单位：人',
      nameTextStyle: {
        color: '#ffff',
        fontSize: 15
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#32AFFF'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#fff',
        fontSize: 17
      },
      splitLine: {
        //修改背景线条样式
        show: true, //是否展示
        lineStyle: {
          type: 'dashed',
          color: '#5DC0FF',
          opacity: 0.35
        }
      }
    },
    series: [
      {
        type: 'bar',
        // name: '入库',
        barWidth: 17,
        itemStyle: {
          // borderRadius: [20, 20, 0, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(102, 197, 241, 1)' },
            { offset: 0.5, color: 'rgba(58, 165, 209, 1)' },
            { offset: 1, color: 'rgba(40, 153, 199, 1)' }
          ])
        },
        emphasis: {
          itemStyle: {
            color: 'rgba(58, 165, 209, 1)'
          }
        },
        data: data.ydata
      }
    ]
  }
  myEchart.setOption(option)
}
</script>
<style scoped lang="scss">
.overview {
  .container {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    .left,
    .right {
      width: 50%;
    }
    .left {
      .box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin-top: 42px;
        .boxItem {
          width: 240.5px;
          height: 86.5px;
          box-sizing: border-box;
          margin-bottom: 42px;
          text-align: center;
          padding: 10px 0 0 90px;
          .value {
            .num {
              font-size: 35px;
              font-family: pmzd;
              font-weight: 400;
              color: #ffd800;
            }
            .unit {
              font-size: 15px;
              margin-left: 5px;
            }
          }
          .label {
            font-size: 15px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #ffffff;
          }
          &:nth-child(1) {
            background: url('@/assets/images/thirdpage/party1.png') no-repeat;
            background-size: 100% 100%;
          }
          &:nth-child(2) {
            background: url('@/assets/images/thirdpage/party2.png') no-repeat;
            background-size: 100% 100%;
          }
          &:nth-child(3) {
            background: url('@/assets/images/thirdpage/party3.png') no-repeat;
            background-size: 100% 100%;
          }
          &:nth-child(4) {
            background: url('@/assets/images/thirdpage/party4.png') no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }
    .right {
      .barEchart {
        width: 600px;
        height: 320px;
        // background-color: red;
      }
    }
  }
}
</style>
